<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/cart.css">
    <script src="./js/jq.js"></script>
    <title>Document</title>
</head>

<body>
    <!-- 头部菜单 -->
    <div class="cart-unme  mz-container clearfix">
        <div class="cart-log">
            <a href="index.html">
                <span></span>
            </a>
        </div>

        <!-- 面包屑 导航-->
        <div class="layout-header-logo">
            <ul class="breadcrumb">
                <li class="active">购物车</li>
                <li>确认订单</li>
                <li>在线支付</li>
                <li>完成</li>
            </ul>
        </div>

        <!-- 订单 -->
        <ul class="layout-header-right-link">
            <li class="layout-header-right-item"><a href="">我的订单</a></li>
            <li class="layout-member">

                <a href="" class="layout-member-link">
                    <span class="layout-member-username" id="topbarUser">
                        用户XXXX....
                    </span>的商城
                </a>

                <ul class="layout-member-downmenu">
                    <li class="layout-member-downmenu-item"><a href="" class="layout-member-downmenu-link">地址管理</a></li>
                    <li class="layout-member-downmenu-item"><a href="" class="layout-member-downmenu-link">我的收藏</a>
                    </li>
                    <li class="layout-member-downmenu-item"><a href="" class="layout-member-downmenu-link">我的回购金</a>
                    </li>
                    <li class="layout-member-downmenu-item"><a href="" class="layout-member-downmenu-link">问题反馈</a></li>
                    <li class="layout-member-downmenu-item"><a href="" class="layout-member-downmenu-link">退出</a></li>
                </ul>
            </li>
        </ul>

    </div>


    <!-- cart -->
    <div class="cart-w">
        <div class="cart  mz-container">
            <table class="cart-header">
                <td class="cart-select-title">
                    <input type="checkbox" class="cart-input JSelectAll"><em class="all">全选</em>
                </td>
                <td class="cart-col-price">单价(元)</td>
                <td class="cart-col-number">数量</td>
                <td class="cart-col-total">小计(元)</td>
                <td class="cart-col-ctrl">编辑</td>
            </table>
            <table class="cart-header">
                <td class="cart-select-title"> <input type="checkbox" class="cart-input"><i>魅族</i></td>
            </table>
            <!-- 购物车头 -->
            <div class="cart-more-buy">
                <ul class="cart-product-buy">
                    <li class="cart-li">
                        <p>加价购</p>
                        <span>另加29元起，即可换购超值商品</span>
                        <a href="">立即加购 </a>
                    </li>
                </ul>
                <ul></ul>
            </div>
            <!--购物车内容 -->
            <div class="cart-body">
                <div class="wrap clearfix">
                    <input type="checkbox" class="getGoods cart-input card-body-input">
                    <div class="cart-body-img ">
                        <a href=""><img  alt="">
                            <div class="cart-body-1">
                                <p class="title"></p>
                                <span class="spec"></span>
                                <span class="color"></span>
                            </div>

                        </a>

                    </div>
                    <!--价格  -->
                    <div class="cart-body-price ">
                        <span class="mz-price">
                            ￥
                        </span>
                    </div>

                    <!-- 按钮 -->
                    <div class="body-adder">
                        <button class="btn-disabled jian">-</button>
                        <span class="number">1</span>
                        <button class="cart-body-add add">+</button>
                    </div>

                    <!--小计 -->
                    <ul class="cart-col-total">
                        <li class="cart-product-price price">￥4299.00</li>
                    </ul>
                </div>
                
            </div>

            <!-- car尾部 -->
            <table class="cart-footer">
                <td class="cart-footer-left clearfix">
                    <input type="checkbox" class="cart-select-all JSelectAll cart-input"><em>全选</em>
                </td>
                <td class="cart-col-price">删除选中的商品</td>
                <td class="cart-col-number">
                    共1件商品，
                    已选择 <i class="total">1</i>件
                </td>

                <td class="cart-footer-right">
                     <em>已优惠<i>0.00</i>元，
                        合计(不含运费)：</em> 
                     <span class="cart-footer-sum  sum" id="totalPrice">
                        ￥4299.00
                    </span>
                      <!-- 结算按钮 -->
                <input type="button" class="click_store_cart_checkout " id="cartSubmit" value="去结算">
                </td>
              
            </table>


            
        </div>
    </div>

    <!-- 底部菜单 -->
    <footer class="menu-footer mz-container">
        <!-- 尾部菜单栏 -->
       <div class="meizu-footer  clearfix h-100" >
         <!-- 尾部菜单栏 左边-->
           <div class="footer-left">
    
               <ul>
                   <li>
                       <a href="JavaScript:;">
                           <img src="./images/server/meizu-footer1.png" alt="">
                       </a>
                       <span>满90免运费</span>
                   </li>
               </ul>
    
               <ul>
                   <li>
                       <a href="JavaScript:;">
                           <img src="./images/server/meizu-footer2.png" alt="">
                       </a>
                       <span>100+城市次日送达</span>
                   </li>
               </ul>
    
               <ul>
                   <li>
                       <a href="JavaScript:;">
                           <img src="./images/server/meizu-footer3.png" alt="">
                       </a>
                       <span>一年没免费保修</span>
                   </li>
               </ul>
    
               <ul>
                   <li>
                       <a href="JavaScript:;">
                           <img src="./images/server/meizu-footer4.png" alt="">
                       </a>
                       <span>15天换货保障</span>
                   </li>
               </ul>
    
               <ul>
                   <li>
                       <a href="JavaScript:;">
                           <img src="./images/server/meizu-footer5.png" alt="">
                       </a>
                       <span>一年免费保修</span>
                   </li>
               </ul>
     
               <ul>
                   <li>
                       <a href="JavaScript:;">
                           <img src="./images/server/meizu-footer6.png" alt="">
                       </a>
                       <span>上门快修</span>
                   </li>
               </ul>
            
           </div>
           <!-- 尾部菜单栏 右边-->
           <div class="footer-right">
               <span>周一至周日 8:00-20:00</span>
               <p>400-788-3333</p>
               <a href="JavaScript:;" class="right-btn">现在客服</a>
           </div>
        
       </div>
       <!-- 线 -->
       <hr class="footer-line">
      
       <div class="meizu-footer-links ">
          <ul class="clearfix">
              <li><a href="">了解魅族</a> </li>
              <li><a href="">加入我们</a> </li>
              <li><a href="">联系我们</a> </li>
              <li><a href="">Flyme</a> </li>
              <li><a href="">魅族社区</a> </li>
              <li><a href="">天猫旗舰店</a> </li>
              <li><a href="">问题反馈</a> </li>
              <li><a href="">线上授权名单公示</a> </li>
              <li><a href=""> 出版物经营许可证</a></li>
              <li><a href=""> 简体中文</a></li>
          </ul>
       </div>
    
       <div class="meizu-footer-certificate">
           ©2020 Meizu Telecom Equipment Co., Ltd. All rights reserved. &nbsp;&nbsp;&nbsp;&nbsp;
          <a href="">  粤ICP备13003602号</a>
          <a href="">合字B2-20170010 </a>
          <a href="">营业执照</a>
          <a href="">法律声明</a>
          <a href=""> <img src="./images/server/menu-footer.png" alt="" >粤公网安备 44049102496009 号 </a>
          <a href=""><img src="./images/server/menu-footer2.png" alt="" ></a>
          <a href=""><img src="./images/server/menu-footer3.png" alt="" ></a>
          <a href=""><img src="./images/server/menu-footer4.png" alt="" ></a>
       </div>
    </footer>

    <script src="./js/car.js"></script>
    <!-- <script>
         // 逻辑：

        // 加载页面时，调用getSum 总价
        getSum();
        // 1.加减（小计）
        // 加法
        $(".add").click(function(){
            // 1.1 算出数量变化
            let num = parseInt($(this).prev().text());
            console.log(num);
            num++;
            $(this).prev().text(num);
            // 1.2 算出 小计价格
            let price = parseInt($(this).parent().prev().text());
            $(this).parent().next().text(price*num);

    </script> -->
</body>

</html>